/**
 * 瀑布图组件
 * 用于展示数据的变化趋势，相邻柱子一端对齐
 */

import React from 'react';
import { Bar } from 'react-chartjs-2';
import { ChartData, ChartOptions } from '../types';

interface WaterfallChartProps {
  data: ChartData;
  options?: ChartOptions;
  height?: number;
}

const WaterfallChart: React.FC<WaterfallChartProps> = ({
  data,
  options,
  height = 400,
}) => {
  // 瀑布图只使用第一个数据集
  if (!data.datasets || data.datasets.length === 0) {
    return null;
  }

  const firstDataset = data.datasets[0];
  const values = Array.isArray(firstDataset.data) ? (firstDataset.data as number[]) : [];
  const n = values.length;
  
  if (n === 0) {
    return null;
  }

  // 转换为数字并验证
  const num = (v: any) => (typeof v === 'number' && isFinite(v) ? v : 0);
  const normalizedValues = values.map(num);

  // 使用浮点柱（floating bars）格式：每根柱子表示为 [起始值, 结束值]
  // 第一根柱子：从0到第一个值
  // 后续柱子：从前一个值到当前值
  const floatingBarData: [number, number][] = [];
  const colors: string[] = [];
  const borderColors: string[] = [];
  
  // 颜色配置
  const defaultBg = firstDataset.backgroundColor || 'rgba(54, 162, 235, 0.6)';
  const defaultBorder = firstDataset.borderColor || 'rgba(54, 162, 235, 1)';
  const upBg = typeof defaultBg === 'string' ? defaultBg : 'rgba(54, 162, 235, 0.6)';
  const upBorder = typeof defaultBorder === 'string' ? defaultBorder : 'rgba(54, 162, 235, 1)';
  const downBg = 'rgba(255, 99, 132, 0.6)';
  const downBorder = 'rgba(255, 99, 132, 1)';
  
  // 第一根柱子：从0到第一个值
  floatingBarData.push([0, normalizedValues[0]]);
  colors.push(upBg);
  borderColors.push(upBorder);
  
  // 后续柱子：从前一个值到当前值
  for (let i = 1; i < n; i++) {
    const start = normalizedValues[i - 1];
    const end = normalizedValues[i];
    // 保持 [start, end] 格式，Chart.js会正确处理，即使start > end（下降情况）
    floatingBarData.push([start, end]);
    
    // 根据是上升还是下降设置颜色
    if (end >= start) {
      colors.push(upBg);
      borderColors.push(upBorder);
    } else {
      colors.push(downBg);
      borderColors.push(downBorder);
    }
  }

  // 构建瀑布图数据：使用浮点柱格式
  const chartData = {
    labels: data.labels,
    datasets: [
      {
        label: firstDataset.label || '数据',
        data: floatingBarData,
        backgroundColor: colors,
        borderColor: borderColors,
        borderWidth: firstDataset.borderWidth || 2,
        borderRadius: 0,
      },
    ],
  };

  const chartOptions: any = {
    ...options,
    indexAxis: 'x', // 垂直方向
    scales: {
      x: {
        stacked: false,
        beginAtZero: false,
      },
      y: {
        stacked: false,
        beginAtZero: false, // 瀑布图可能包含负值，不强制从0开始
      },
    },
  };

  return <Bar data={chartData as any} options={chartOptions} height={height} />;
};

export default WaterfallChart;

